<div class="card card-default">
          <div class="card-header">
            <h3 class="card-title">Bootstrap Duallistbox</h3>

            <div class="card-tools">
              <button type="button" class="btn btn-tool" data-card-widget="collapse">
                <i class="fas fa-minus"></i>
              </button>
              <button type="button" class="btn btn-tool" data-card-widget="remove">
                <i class="fas fa-times"></i>
              </button>
            </div>
          </div>
          <!-- /.card-header -->
          <div class="card-body">
            <div class="row">
              <div class="col-12">
                <div class="form-group">
                  <label>Multiple</label>
                  <div class="bootstrap-duallistbox-container row moveonselect moveondoubleclick"> <div class="box1 col-md-6">
                    <label for="bootstrap-duallistbox-nonselected-list_" style="display: none;"></label>
                    <span class="info-container">     <span class="info">Showing all 7</span>
                      <button type="button" class="btn btn-sm clear1" style="float:right!important;">show all</button>
                    </span>   <input class="form-control filter" type="text" placeholder="Filter">
                    <div class="btn-group buttons">
                      <button type="button" class="btn moveall btn-outline-secondary" title="Move all">&gt;&gt;</button>
                    </div>
                    <select multiple="multiple" id="bootstrap-duallistbox-nonselected-list_" name="_helper1" style="height: 101.99px;">
                      <option selected="">Alabama</option>
                      <option>Alaska</option>
                      <option>California</option>
                      <option>Delaware</option>
                      <option>Tennessee</option>
                      <option>Texas</option>
                      <option>Washington</option>
                    </select>
                  </div>
                    <div class="box2 col-md-6">
                      <label for="bootstrap-duallistbox-selected-list_" style="display: none;"></label>
                      <span class="info-container">
                        <span class="info">Empty list</span>
                        <button type="button" class="btn btn-sm clear2" style="float:right!important;">show all</button>
                      </span>
                      <input class="form-control filter" type="text" placeholder="Filter">
                      <div class="btn-group buttons">
                        <button type="button" class="btn removeall btn-outline-secondary" title="Remove all">&lt;&lt;</button>
                      </div>
                      <select multiple="multiple" id="bootstrap-duallistbox-selected-list_" name="_helper2" style="height: 101.99px;">

                      </select>
                    </div>
                  </div>
                  <select class="duallistbox" multiple="multiple" style="display: none;">
                    <option selected="">Alabama</option>
                    <option>Alaska</option>
                    <option>California</option>
                    <option>Delaware</option>
                    <option>Tennessee</option>
                    <option>Texas</option>
                    <option>Washington</option>
                  </select>
                </div>
                <!-- /.form-group -->
              </div>
              <!-- /.col -->
            </div>
            <!-- /.row -->
          </div>
          <!-- /.card-body -->
          <div class="card-footer">
            Visit <a href="https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox#readme">Bootstrap Duallistbox</a> for more examples and information about
            the plugin.
          </div>
        </div>